<template>
	<div class="hello"></div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

let renderer,
	camera,
	scene,
	objects = [];

// import { GUI } from "dat.gui";
// const gui = new GUI();
export default {
	name: 'HelloWorld',
	props: {
		msg: String
	},
	created() {
		this.main();
		this.setScene();
		this.setCamera();
		this.setLight();
		this.setObjts();
		this.renderThree();
		this.orthers();
	},
	methods: {
		main() {
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			// add the output of the render function to the HTML
			document.body.appendChild(renderer.domElement);
		},
		setScene() {
			scene = new THREE.Scene();
		},
		setCamera() {
			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
			camera.position.set(0, 0, 10);
		},
		setLight() {
			{
				const color = 0xffcc66;
				const intensity = 2;
				const light = new THREE.SpotLight(color, intensity);
				light.position.set(2, 6, 2);
				// light.target.position.set(-5, 0, 0);
				scene.add(light);
				scene.add(light.target);

				const helper = new THREE.SpotLightHelper(light);
				scene.add(helper);
			}
		},
		async setObjts() {
			// 创建几何体
			const homeObj = new THREE.Object3D();
			homeObj.name = 'homeObj';
			homeObj.position.set(0, 0, 0);
			scene.add(homeObj);
			objects.push(homeObj);

			const geometry = new THREE.CylinderGeometry(1, 1.5, 1, 80);
			const material = new THREE.MeshPhongMaterial({
				// color: 0xffff00,
				// emissive: 0xffff00,
			});
			const mesh = new THREE.Mesh(geometry, material);
			homeObj.add(mesh);

			const figureObj = new THREE.Object3D();
			figureObj.name = 'figureObj';
			homeObj.add(figureObj);
			objects.push(figureObj);

			const gltf = await this.loadFile('/static/3d/koala_con_flor/scene.gltf');
			figureObj.add(gltf.scene);
			figureObj.position.set(0, 0.5, 0);
			figureObj.scale.set(3, 3, 3);
			const axesHelper = new THREE.AxesHelper(2);
			figureObj.add(axesHelper);
		},
		renderThree() {
			function resizeRendererToDisplaySize(renderer) {
				const canvas = renderer.domElement;
				const width = canvas.clientWidth;
				const height = canvas.clientHeight;
				const needResize = canvas.width !== width || canvas.height !== height;
				if (needResize) {
					renderer.setSize(width, height, false);
				}
				return needResize;
			}
			function render(time) {
				time *= 0.001;
				if (resizeRendererToDisplaySize(renderer)) {
					const canvas = renderer.domElement;
					camera.aspect = canvas.clientWidth / canvas.clientHeight;
					camera.updateProjectionMatrix();
				}
				objects.forEach(item => {
					//   console.log(item);
					if (item.name == 'figureObj') {
						item.rotation.y = time;
					}
				});
				renderer.render(scene, camera);
				requestAnimationFrame(render);
			}
			requestAnimationFrame(render);
		},
		orthers() {
			const controls = new OrbitControls(camera, renderer.domElement);
			controls.minPolarAngle = 0.5 * Math.PI;
			controls.maxPolarAngle = (0.9 * Math.PI) / 2;
			controls.enableZoom = true;
		},
		//加载模型
		loadFile(url) {
			const loader = new GLTFLoader(); //引入模型的loader实例
			return new Promise((resolve, reject) => {
				loader.load(
					url,
					gltf => {
						resolve(gltf);
					},
					({ loaded, total }) => {
						// let load = Math.abs((loaded / total) * 100);
						// this.loadingWidth.value = load;
						// if (load >= 100) {
						//   setTimeout(() => {
						//     this.isLoading.value = false;
						//   }, 1000);
						// }
						console.log((loaded / total) * 100 + '% loaded');
					},
					err => {
						reject(err);
					}
				);
			});
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
